<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
        }
        .red{
            background-color: rgb(226, 166, 166);
        }
        .border{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <p id="p1" title="p表情" data-msg="一个信息" data-name="ok">位置</p>
        <!-- - beforebegin -->
        <div class="box red border" id="mybox">
        <!-- afterbegin -->
            red box
            <h2 class="ah2">h2表情</h2>
        <!-- beforeend -->
        </div>
        <!-- afterend -->
    </div>
    <script>
        var container = document.querySelector('.container');
        //创建节点对象
        var article = document.createElement('article');
        //创建节点字符串
        var p = `<p>被创建的P元素</p>`
        //把节点放入container里面的最后面
        container.append(article)
        // container.innerHTML = p;

        var a = document.createElement('a');
        // a.setAttribute('href','https://baidu.com')
        // a.setAttribute('target','_blank')

        // a.setAttribute('id','link')
        a.id = 'link2'
        a.href = 'https://baidu.com'
        a.target = "_blank"
        a.id = 'link3'
        var h2 = document.querySelector('.ah2')
        var box = document.querySelector('.box');
        var mybox = document.getElementById('mybox')
        var p1 = document.createElement('p');
        p1.innerText = "p1元素"
        var p2 = document.createElement('p');
        p2.innerText = "p2元素"

    </script>
</body>
</html>